<template>
  <div class="userData">
    <div class="userhead">
      <img :src="getHard">
    </div>
    <!-- <div class="userName">
      {{data.nickname}}
    </div> -->
    <div class="toast">
      <div class="toastHard">
        <img :src="getHard">
        <p class="toast_userName">{{data.nickname}} </p>
      </div>
      <div class="toast_list">
        <div class="left_list list-item">
          <div class="listHead">个人动态</div>
          <div class="list-chidren">
            <router-link to="/front/user/myCollect"> 关注的项目</router-link>
          </div>
          <div class="list-chidren">
            <router-link to="/front/user/myOrder"> 我的订单</router-link>
          </div>
          <div class="list-chidren">
            <router-link to="/front/user/myGoods"> 发起的众筹</router-link>

          </div>
          <div class="list-chidren">
            <router-link to="/front/user/myLooked"> 浏览历史</router-link>

          </div>
        </div>

        <div class="right_list list-item">
          <div class="listHead">我的设置</div>
          <div class="list-chidren">
            <router-link to="/front/user/myInfo"> 管理个人信息</router-link>
          </div>
          <div class="list-chidren">
            <router-link to="/front/user/myInfo">个人中心</router-link>
          </div>
          <div class="list-chidren">
            <router-link to="/front/user/myInfo"> 管理地址薄</router-link>

          </div>
        </div>
      </div>
      <div class="logout-warp"
           @click="logout">
        退出登录
      </div>
    </div>
  </div>
</template>

<script>
import { default_head } from '@/common/config.js'
import { userLogout } from 'server/front_k.js'

const head = 'https://ae01.alicdn.com/kf/Hd73fc18d5e474b12bca59b146c20819cF.jpg'

export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    getHard() {
      return this.data.head || default_head
    }
  },
  methods: {
    logout() {
      this.$show
        .show1({
          title: '退出登录',
          content: '您是否要退出登录？',
          success: '已退出登录'
        })
        .then(res => {
          // 获得token
          const token = window.localStorage.getItem('front_token')

          userLogout(token).then(res => {
            window.localStorage.removeItem('front_token')
            this.$store.commit('userLogout')
          })
        })
        .catch(err => {})
    }
  }
}
</script>

<style scoped>
.userData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 10px;
  position: relative;
}
.userhead {
  height: 40px;
  width: 40px;
  margin-right: 20px;
  cursor: pointer;
}
.userhead img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.toast {
  width: 300px;
  /* padding: 20px; */
  position: absolute;
  top: 80px;
  background-color: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 23px 1px rgba(0, 0, 0, 0.2);
  z-index: 3;
  display: none;
}

.userData:hover .toast {
  display: block;
}

.toastHard {
  text-align: center;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.toastHard img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.toast_userName {
  padding: 20px 0;
  font-size: 20px;
  font-weight: 600;
}
.list-item {
  flex: 1;
  /* border: 1px solid #ccc; */
  text-align: center;
}
.list-item > div {
  padding: 10px;
  text-align: left;
  color: #7a8087;
  /* padding-left: 10px; */
}

.toast_list {
  display: flex;
  margin-top: 20px;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 100px;
}
.toast_list .listHead {
  font-weight: 600;
  font-size: 16px;
  color: #000;
}
.left_list {
  border-right: 2px solid #e5e5e5;
}
.right_list {
  margin-left: 20px;
}
.list-chidren {
  cursor: pointer;
}
.list-chidren:hover {
  color: var(--color-main);
  text-decoration: underline;
}
.list-chidren a:hover {
  color: var(--color-main);
  text-decoration: underline;
}
.logout-warp {
  text-align: center;
  height: 40px;
  line-height: 40px;
  background-color: #f6f9f9;
  cursor: pointer;
}
.logout-warp:hover {
  background-color: #e6e9e9;
}
</style>